<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件调用父组件</title>
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}--{{age}}--{{user}}</h1>
    <!--    使用局部组件动态传递数据 传递父组件中的事件  @起别名:向组件中传递事件  将父组件的指定事件传递到子组件,使用this.$emit()-->
    <login @aa="findAll" @test='test'></login>
</div>
</body>
</html>
<script>
    //如何将父组件中的事件传递给子组件中
    //定义组件配置对象
    const login = {
        template: "<div><h3>登录界面--{{msg}}</h3><button @click='test'>点我触发事件</button></div>",
        data() {
            return {
                msg:"我是子组件的信息",
                age:"子组件34",
                user:{id:2,name:"王五",age:12,bir:"1997-02-16"},
            };
        },
        methods: {
            test(){
                alert("子组件事件")
                // this.$emit('aa');//调用父组件的相关事件
                this.$emit('test',this.msg,this.age,this.user);//调用父组件的传递事件,并传递参数
            }
        }
    };

    //如何实现父组件向子组件传递参数 在vue中父组件向子组件传递数据可以使用prop属性完成数据传递

    const app = new Vue({
        el: "#app",   //element:元素
        data: {        //data:数据 用来vue实例对象绑定一系列数据
            msg: "vue组件开发",
            name: "小杨",
            age: 23,
            user: {id: 1, name: "小明", age: 23}
        },
        methods: {
            findAll() {
                alert("父组件中定义的事件.....")
            },
            test(msg,age,user){
                // alert("父组件的test事件")
                console.log(user);
                this.user = user;
                this.msg = msg;
                this.age = age;
            }
        },
        computed: {},
        components: {
            login,
        }
    });
</script>
